<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>漫画内容修改</title>

    <!--data table-->
    {css href="/static/admin/css/bootstrap.min.css"}
    {css href="/static/admin/js/data-tables/DT_bootstrap.css"}
    {css href="/static/admin/css/style.css"}
    {css href="/static/admin/css/style-responsive.css"}
    {css href="/static/admin/css/bootstrap-fileupload.min.css"}
    {css href="/static/admin/css/toastr.min.css"}

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    {js href="/static/admin/js/html5shiv.js"}
    {js href="/static/admin/js/respond.min.js"}
    <![endif]-->
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div class="left-side sticky-left-side">

        <!--logo and iconic logo start-->
        <div class="logo">
            <a href="index.html"><img src="/static/admin/images/logo.png" alt=""></a>
        </div>

        <div class="logo-icon text-center">
            <a href="index.html"><img src="/static/admin/images/logo_icon.png" alt=""></a>
        </div>
        <!--logo and iconic logo end-->


        <div class="left-side-inner">

            <!-- visible to small devices only -->

            <!--sidebar nav start-->
            <ul class="nav nav-pills nav-stacked custom-nav">
                <li><a href="{:url('admin/index/show')}"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>

                <li class="menu-list"><a href=""><i class="fa fa-th-list"></i> <span>用户管理</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="{:url('admin/user/index')}"> 用户列表</a></li>
                        <li><a href="{:url('admin/user/create')}"> 用户添加</a></li>
                    </ul>
                </li>

                <li class="menu-list"><a href=""><i class="fa fa-tasks"></i> <span>角色管理</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="{:url('admin/role/index')}">角色列表</a></li>
                        <li><a href="{:url('admin/role/create')}">角色添加</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href=""><i class="fa fa-file-text"></i> <span>节点管理</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="{:url('admin/access/index')}">节点列表</a></li>
                        <li><a href="{:url('admin/access/create')}">节点添加</a></li>
                    </ul>
                </li>
                <li class="menu-list nav-active"><a href=""><i class="fa fa-book"></i> <span>漫画管理</span></a>
                    <ul class="sub-menu-list">
                        <li class="active"><a href="{:url('admin/cartoon/index')}"> 漫画列表</a></li>
                        <li><a href="{:url('admin/cartoon/create')}"> 添加漫画</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href=""><i class="fa fa-book"></i> <span>漫画分类</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="{:url('admin/classify/index')}"> 分类列表</a></li>
                        <li><a href="{:url('admin/classify/create')}"> 添加分类</a></li>
                    </ul>
                </li>
                <li><a href="login.html"><i class="fa fa-sign-in"></i> <span>Login Page</span></a></li>

            </ul>
            <!--sidebar nav end-->

        </div>
    </div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->


            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="/static/admin/images/photos/user-avatar.png" alt="" />
                            {$guanli}
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                            <li><a href="#"><i class="fa fa-user"></i>  Profile</a></li>
                            <li><a href="#"><i class="fa fa-cog"></i>  Settings</a></li>
                            <li><a href="#"><i class="fa fa-sign-out"></i> Log Out</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->


        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            漫画内容修改
                            <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                        <a href="javascript:;" class="fa fa-times"></a>
                     </span>
                        </header>
                        <div class="panel-body">
                            <legend>漫画目录</legend>
                            <!--<input type="hidden" name="_method" value="PUT">-->

                                <div class="adv-table editable-table ">
                                    <div class="clearfix">
                                        <div class="btn-group pull-right">
                                            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Tools <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu pull-right">
                                                <li><a onclick="window.print()">Print</a></li>
                                                <li><a onclick="window.print()">Save as PDF</a></li>
                                                <li><a onclick="window.print()">Export to Excel</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="space15"></div>
                                    <table class="table table-striped table-hover table-bordered" id="editable-sample">
                                        <thead>
                                        <tr>
                                            <th style="text-align:center;">ID</th>
                                            <th style="text-align:center;">目录名称</th>
                                            <th style="text-align:center;">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {if condition="is_string($data)"}
                                        <tr class="text-center">
                                            <td style="vertical-align: middle;">{$data}</td>
                                            <td style="vertical-align: middle;">{$data}</td>
                                            <td style="vertical-align: middle;">{$data}</td>
                                        </tr>
                                        {else/}
                                        {volist name="data" id="v"}
                                        <tr class="text-center">
                                            <td style="vertical-align: middle;">{$v['id']}</td>
                                            <td style="vertical-align: middle;">{$v['name']}</td>
                                            <td style="vertical-align: middle;">
                                                <button class="btn btn-default show-btn" data-toggle="modal" data-target="#myModal" data-id="{$v['id']}">&nbsp;查看封面信息&nbsp;</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{:url('admin/mulu/editt',['id'=>$v['id']])}"> 编辑&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;
                                                <button class="btn btn-danger btn-xs del-btn" data-id="{$v['id']}">&nbsp;删除&nbsp;</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        </tr>
                                        {/volist}
                                        {/if}
                                        </tbody>
                                    </table>
                                </div>

                            <hr>

                            <form id="default" name="regForm" class="form-horizontal" action="{:url('admin/mulu/save')}" method="post" enctype="multipart/form-data">
                                <input type="hidden" name="zid" value="{$zid}">

                                <div class="row">
                                    <div class="col-md-2 lead text-danger">添加目录/内容</div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3">
                                        <input type="text" name="name" class="form-control" placeholder="目录名称">
                                    </div>
                                </div>

                                <br>
                                <div class="form-group">
                                    <div class="col-md-9">
                                        <div class="fileupload fileupload-new" data-provides="fileupload">
                                            <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">

                                            </div>
                                            <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                            <div>
                                                   <span class="btn btn-default btn-file">
                                                   <span class="fileupload-new"><i class="fa fa-paper-clip"></i> 选择内容</span>
                                                   <span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
                                                   <input type="file" class="default" name="detail[]" multiple='multiple'/>
                                                   </span>
                                                <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> Remove</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-2">
                                        <button class="btn btn-primary btn-lg">确认添加</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <!--footer section end-->

    </div>
    <!-- main content end-->
</section>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">
                    [<u></u>] 的封面
                </h4>
            </div>
            <div class="modal-body">
                <div class="row" style="text-align: center;">
                    <img src="" width="450">
                    <img src="" width="450">
                    <img src="" width="450">
                    <img src="" width="450">
                    <img src="" width="450">
                    <p></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- Placed js at the end of the document so the pages load faster -->
{js href="/static/admin/js/jquery-1.10.2.min.js"}
{js href="/static/admin/js/jquery-ui-1.9.2.custom.min.js"}
{js href="/static/admin/js/jquery-migrate-1.2.1.min.js"}
{js href="/static/admin/js/bootstrap.min.js"}
{js href="/static/admin/js/modernizr.min.js"}
{js href="/static/admin/js/jquery.nicescroll.js"}
{js href="/static/admin/js/toastr.min.js"}



<!--data table-->
{js href="/static/admin/js/data-tables/jquery.dataTables.js"}
{js href="/static/admin/js/data-tables/DT_bootstrap.js"}


<!--icheck -->
{js href="/static/admin/js/iCheck/jquery.icheck.js"}
{js href="/static/admin/js/icheck-init.js"}

<!--multi-select-->
{js href="/static/admin/js/jquery-multi-select/js/jquery.multi-select.js"}
{js href="/static/admin/js/jquery-multi-select/js/jquery.quicksearch.js"}
{js href="/static/admin/js/multi-select-init.js"}

<!--spinner-->
{js href="/static/admin/js/fuelux/js/spinner.min.js"}
{js href="/static/admin/js/fuelux/js/spinner-init.js"}

<!--file upload-->
{js href="/static/admin/js/bootstrap-fileupload.min.js"}

<!--tags input-->
{js href="/static/admin/js/jquery-tags-input/jquery.tagsinput.js"}
{js href="/static/admin/js/tagsinput-init.js"}

<!--bootstrap input mask-->
{js href="/static/admin/js/bootstrap-inputmask/bootstrap-inputmask.min.js"}

<!--common scripts for all pages-->
{js href="/static/admin/js/scripts.js"}

<!--script for editable table-->
{js href="/static/admin/js/editable-table.js"}

<!-- END JAVASCRIPTS -->


<script>

    $(function(){

        // 设置弹框参数
        toastr.options = {
            closeButton: true,// 是否显示关闭按钮
            progressBar: true,// 实现显示计时条
            timeOut: "3000",  // 自动关闭时间
            positionClass: "toast-top-right" // 提示位置
            // toast-top-full-width 顶端，宽度铺满整个屏幕
            // toast-top-right  顶端右边
            // toast-bottom-left
        };

        //删除
        $('.del-btn').click(function(){
            var ac_id = $(this).attr('data-id');
            // console.log('删除操作,ID:', ac_id);
            if (confirm('你确定要[删除]吗?!')) {
                var obj = $(this).parents('tr');
                delAjax(ac_id, obj); // 执行AJAX删除
            }
        });

        // 执行AJAX删除
        function delAjax(id, obj) {
            // console.log(obj);
            $.ajax({
                type: 'delete',
                url: '/mulus/' + id,
                dataType: 'json',
                success: function (data) {
                    // console.log(data);
                    if (data.status) {
                        toastr.success(data.info);
                        // 将该条目删除掉
                        obj.remove();
                    } else {
                        toastr.error(data.info, 'FBI WARING:');
                    }
                },
                error: function () {
                    alert('AJAX操作失败');
                }
            });
        }



        // 触发查询单个用户信息
        $('.show-btn').click(function () {
            var ac_id = $(this).attr('data-id');
            // console.log('查询操作,ID:', ac_id);
            showAjax(ac_id); // 指定查看信息操作
        });

        // 执行AJAX查询
        function showAjax(id) {
            $.ajax({
                type: 'get',
                url: '/mulus/' + id,
                dataType: 'json',
                success: function (data) {
                    // console.log(data);
                    if (data.status) {
                        $('.modal-title u').html(data.name);
                        var msg = data.detail;
                        console.log(msg);
                        if (Array.isArray(msg)){
                            $('.modal-body img:eq(1)').attr('src','/comic/'+msg[0]);
                            $('.modal-body p').html('');
                        }else{
                            $('.modal-body img').attr('src','');
                            $('.modal-body p').html(msg);
                        }
                        // console.log('/comic/'+msg);
                    } else {
                        $('.modal-title u').html(data.name);
                        $('.modal-body h3').html(data.detail);
                    }
                },
                error: function () {
                    alert('AJAX操作失败');
                }
            });
        }

    });

</script>

<script>
    jQuery(document).ready(function() {
        EditableTable.init();
    });
</script>

</body>
</html>
